<template>
  <div class="dashboard">
    <a-row :gutter="16" class="stats-row">
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="stat-card" :bordered="false">
          <a-statistic
            title="总用户数"
            :value="stats.totalUsers"
            :value-style="{ color: '#1890ff' }"
          >
            <template #prefix>
              <UserOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="stat-card" :bordered="false">
          <a-statistic
            title="今日访问"
            :value="stats.todayVisits"
            :value-style="{ color: '#52c41a' }"
          >
            <template #prefix>
              <EyeOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="stat-card" :bordered="false">
          <a-statistic
            title="总订单数"
            :value="stats.totalOrders"
            :value-style="{ color: '#faad14' }"
          >
            <template #prefix>
              <ShoppingCartOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="stat-card" :bordered="false">
          <a-statistic
            title="总收入"
            :value="stats.totalRevenue"
            :precision="2"
            :value-style="{ color: '#f5222d' }"
            prefix="¥"
          >
            <template #prefix>
              <DollarOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" class="chart-row">
      <a-col :xs="24" :lg="16">
        <a-card title="访问趋势" :bordered="false" class="chart-card">
          <div class="chart-placeholder">
            <BarChartOutlined class="chart-icon" />
            <p>这里可以集成 ECharts 或其他图表库</p>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="8">
        <a-card title="快捷操作" :bordered="false" class="action-card">
          <a-space direction="vertical" :size="12" style="width: 100%">
            <a-button type="primary" block size="large">
              <template #icon>
                <PlusOutlined />
              </template>
              新增用户
            </a-button>
            <a-button block size="large">
              <template #icon>
                <FileTextOutlined />
              </template>
              查看报表
            </a-button>
            <a-button block size="large">
              <template #icon>
                <SettingOutlined />
              </template>
              系统配置
            </a-button>
          </a-space>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16">
      <a-col :span="24">
        <a-card title="最近活动" :bordered="false">
          <a-list :data-source="activities" :loading="loading">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta :description="item.time">
                  <template #title>
                    <a>{{ item.title }}</a>
                  </template>
                  <template #avatar>
                    <a-avatar :style="{ backgroundColor: item.color }">
                      {{ item.user }}
                    </a-avatar>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import {
  UserOutlined,
  EyeOutlined,
  ShoppingCartOutlined,
  DollarOutlined,
  BarChartOutlined,
  PlusOutlined,
  FileTextOutlined,
  SettingOutlined,
} from '@ant-design/icons-vue'

const stats = reactive({
  totalUsers: 2845,
  todayVisits: 1234,
  totalOrders: 5678,
  totalRevenue: 128456.78,
})

const loading = ref(false)

const activities = ref([
  {
    title: '用户张三注册了账号',
    time: '2小时前',
    user: '张三',
    color: '#1890ff',
  },
  {
    title: '订单 #12345 已完成支付',
    time: '3小时前',
    user: '李四',
    color: '#52c41a',
  },
  {
    title: '系统配置已更新',
    time: '5小时前',
    user: '管理员',
    color: '#faad14',
  },
  {
    title: '新增商品分类',
    time: '1天前',
    user: '王五',
    color: '#f5222d',
  },
])
</script>

<style scoped>
.dashboard {
  width: 100%;
}

.stats-row {
  margin-bottom: 16px;
}

.stat-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.3s;
}

.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.chart-row {
  margin-bottom: 16px;
}

.chart-card,
.action-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  min-height: 300px;
}

.chart-placeholder {
  height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}

.chart-icon {
  font-size: 64px;
  margin-bottom: 16px;
  color: #d9d9d9;
}

:deep(.ant-card-head) {
  border-bottom: 1px solid #f0f0f0;
}

:deep(.ant-statistic-title) {
  font-size: 14px;
  color: #666;
}

:deep(.ant-statistic-content) {
  font-size: 24px;
  font-weight: 600;
}
</style>
